<template>
  <div id="app">
    <div class="container">
      <h1>用户信息管理系统</h1>
      <el-button type="primary" @click="handleAdd">新增用户</el-button>
      <el-button type="success" @click="handleEdit">编辑用户</el-button>
      
      <!-- 用户信息对话框 -->
      <UserFormDialog 
        ref="userFormDialogRef" 
        @submit="handleSubmit"
        @cancel="handleCancel"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import UserFormDialog from './components/UserFormDialog.vue'

const userFormDialogRef = ref()

// 模拟用户数据
const mockUserData = {
  username: 'testuser',
  realName: '测试用户',
  roleType: 'system',
  roleName: '管理员',
  birthDate: '1990-01-01 12:00:00',
  gender: 'male',
  status: 'normal',
  phone: '13800138000',
  email: 'test@example.com',
  organization: 'university'
}

// 新增用户
const handleAdd = () => {
  userFormDialogRef.value.openDialog()
}

// 编辑用户
const handleEdit = () => {
  userFormDialogRef.value.openDialog(mockUserData)
}

// 处理表单提交
const handleSubmit = (formData) => {
  console.log('提交的数据:', formData)
  // 这里可以添加API调用等逻辑
}

// 处理取消操作
const handleCancel = () => {
  console.log('用户取消了操作')
}

onMounted(() => {
  console.log('应用已加载')
})
</script>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #409EFF;
  margin-bottom: 30px;
  font-weight: 500;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>